<!--
   This file is part of input-overlay
   github.con/univrsal/input-overlay
   Copyright 2021 univrsal <uni@vrsal.de>.
  
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, version 2 of the License.
  
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
  
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>

<head>
    <title>io-cct</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

    <!-- 
            https://www.flaticon.com/free-icon/video-game_4021738
            https://www.flaticon.com/free-icon/wrench_3680814
            both icons by freepik
    -->
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/math.js"></script>
    <script src="./js/gamepad.js"></script>
    <script src="./js/vc.js"></script>
    <script src="./js/elements.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/cs.js"></script>
    <script src="./js/draw.js"></script>
    <script src="./js/editor.js"></script>
    <script src="./js/dl.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/gui.js"></script>
    <script src="./js/select.js"></script>
    <script src="./js/file.js"></script>

    <link rel="stylesheet" href="./css/dialog.css">
    <link rel="stylesheet" href="./css/select.css">
    <link rel="stylesheet" href="./css/file.css">
    <style>
        #editor-canvas,
        #main-canvas {
            /* IE, only works on <img> tags */
            -ms-interpolation-mode: nearest-neighbor;
            /* Firefox */
            image-rendering: crisp-edges;
            /* Chromium + Safari */
            image-rendering: pixelated;
        }

        body,
        html {
            height: 100%;
        }
    </style>
</head>

<body style="margin: 0px; overflow: hidden;">
    <div class="canvas-container" id="main-canvas-container">
        <canvas id="main-canvas"></canvas>
    </div>
    <div id="element-dialog" class="dialog">
        <p class="dialog-title noselect">Element settings</p>

        <div class="properties">
            <!-- Position -->
            <div><label for="selected-element-x">X</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-x" value="0"></div>

            <div><label for="selected-element-y">Y</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-y" value="0"></div>

            <!-- UV -->
            <div><label for="selected-element-u">U</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-u" value="0"></div>

            <div><label for="selected-element-v">V</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-v" value="0"></div>

            <!-- W/H -->
            <div><label for="selected-element-w">W</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-w" value="0"></div>

            <div><label for="selected-element-h">H</label></div>
            <div class="textbox-container"><input type="text" class="numeric" id="selected-element-h" value="0"></div>

            <!-- Z -->
            <div><label for="selected-element-layer">Z</label></div>
            <div class="textbox-container-wide"><input type="text" class="numeric" id="selected-element-layer"
                    value="0">
            </div>

            <div><label for="selected-element-id">ID</label></div>
            <div class="textbox-container-wide"><input type="text" class="coord" id="selected-element-id" value="">
            </div>

            <!-- Buttons -->
            <div class="grid-full-width"><input type="button" class="full-width" id="ok" value="Apply"></div>

            <div class="grid-full-width">
                <input type="button" class="full-width dropbtn" id="new" value="Add new element"
                    onclick="new_type_dropdown()">
                <div id="type-dropdown" class="dropdown-content ">
                    <a onclick="open_editor('texture', false)" href="#">Texture</a>
                    <a onclick="open_editor('keyboard_button', false)" href="#">Keyboard button</a>
                    <a onclick="open_editor('gamepad_button', false)" href="#">Gamepad button</a>
                    <a onclick="open_editor('mouse_button', false)" href="#">Mouse button</a>
                    <a onclick="open_editor('mouse_wheel', false)" href="#">Mouse wheel</a>
                    <a onclick="open_editor('analog_stick', false)" href="#">Analog stick</a>
                    <a onclick="open_editor('trigger', false)" href="#">Gamepad trigger</a>
                    <a onclick="open_editor('player_id', false)" href="#">Gamepad player id</a>
                    <a onclick="open_editor('dpad', false)" href="#">DPad</a>
                    <a onclick="open_editor('mouse_movement', false)" href="#">Mouse movement</a>
                </div>
            </div>

            <div class="grid-full-width"><input type="button" onclick="open_editor(null, true)" class="full-width" id="mod" value="Edit selected element">
            </div>
            <div class="grid-full-width"><input type="button" class="full-width" id="del"
                    value="Delete selected element"></div>

            <div class="grid-full-width"><input type="button" class="full-width" id="export" onclick="download_config()" value="Export to JSON">
            </div>
        </div>
    </div>

    <!-- Load config dialog -->
    <div id="setup-dialog" class="modal-dialog">
        <div class="intro-grid">
            <p class="dialog-title noselect setup-wide">Setup</p>
            <div>
                <label>Texture file</label>
            </div>
            <div>
                <div id="texture-drop-area">
                </div>
            </div>

            <div>
                <label>Config file (when editing an existing config)</label>
            </div>
            <div>
                <div id="config-drop-area">
                </div>
            </div>

            <div>
                <label>Default width</label>
            </div>
            <div>
                <label>Default height</label>
            </div>
            <div style="margin-right: 10px;">
                <input type="text" class="numeric" id="default-width" value="0">
            </div>
            <div>
                <input type="text" class="numeric" id="default-height" value="0">
            </div>

            <div>
                <label>Horizontal offset</label>
            </div>

            <div>
                <label>Vertical offset</label>
            </div>
            <div style="margin-right: 10px;">
                <input type="text" class="numeric" id="horizontal-offset" value="0">
            </div>
            <div>
                <input type="text" class="numeric" id="vertical-offset" value="0">
            </div>

            <div style="margin-right: 5px">
                <input type="button" class="full-width" id="start-button" onclick="setup()" value="Start">
            </div>
        </div>
    </div>

    <!-- Element edit dialog -->
    <div id="edit-element-dialog" class="modal-dialog">
        <div class="edit-grid">
            <p class="dialog-title noselect" id="editor-title">Element editor</p>

            <div class="editor-properties">
                <div class="properties">
                    <div><label for="editor-element-id">ID</label></div>
                    <div class="textbox-container-wide"><input type="text" id="editor-element-id" value="">
                    </div>

                    <!-- UV -->
                    <div><label for="editor-element-u">U</label></div>
                    <div class="textbox-container"><input type="text" class="numeric" id="editor-element-u" value="0">
                    </div>

                    <div><label for="editor-element-v">V</label></div>
                    <div class="textbox-container"><input type="text" class="numeric" id="editor-element-v" value="0">
                    </div>

                    <!-- W/H -->
                    <div><label for="editor-element-w">W</label></div>
                    <div class="textbox-container"><input type="text" class="numeric" id="editor-element-w" value="0">
                    </div>

                    <div><label for="editor-element-h">H</label></div>
                    <div class="textbox-container"><input type="text" class="numeric" id="editor-element-h" value="0">
                    </div>

                    <!-- Z -->
                    <div><label for="editor-element-layer">Z</label></div>
                    <div class="textbox-container-wide"><input type="text" class="numeric" id="editor-element-layer"
                            value="0">
                    </div>

                    <!-- Misc stuff -->

                    <!-- Key code-->
                    <div class="label-container-wide" id="editor-element-keycode-label"><label
                            for="editor-element-keycode">Keycode</label></div>
                    <div class="textbox-container-medium" id="editor-element-keycode-container"><input type="text"
                            class="hex-numeric" id="editor-element-keycode" value="0x0">
                    </div>
                    <div id="editor-element-record-code-container" class="grid-full-width">
                        <label for="editor-element-record-code" class="cbx-label">
                            <input type="checkbox" id="editor-element-record-code" checked>
                            <span class="cbx">
                                <svg width="12px" height="11px" viewBox="0 0 12 11">
                                    <polyline points="0.75 4.721 3.375 7.5 8.25 0.75"></polyline>
                                </svg>
                            </span>
                            <span>Record keycode</span>
                        </label>
                    </div>

                    <!-- Analog stick -->
                    <div id="editor-element-analog-stick-side-label" class="label-container-wide"><label
                            for="editor-element-analog-stick-side">Stick side</label>
                    </div>
                    <div class="textbox-container-medium" id="editor-element-analog-stick-side-container">
                        <div class="custom-select" style="width:100%">
                            <select id="editor-element-analog-stick-side">
                                <option value="0">Left</option>
                                <!-- The w3 code uses the first one as a placeholder, which i don't want -->
                                <option value="0">Left</option>
                                <option value="1">Right</option>
                            </select>
                        </div>
                    </div>

                    <div id="editor-element-analog-stick-radius-label" class="label-container-wide"><label
                            for="editor-element-analog-stick-side">Radius</label>
                    </div>
                    <div class="textbox-container-medium" id="editor-element-analog-stick-radius-container">
                        <input type="text" class="coord" id="editor-element-analog-stick-radius" value="20">
                    </div>

                    <!-- trigger -->
                    <div id="editor-element-trigger-button-container" class="grid-full-width">
                        <label for="editor-element-trigger-button" class="cbx-label">
                            <input type="checkbox" id="editor-element-trigger-button">
                            <span class="cbx">
                                <svg width="12px" height="11px" viewBox="0 0 12 11">
                                    <polyline points="0.75 4.721 3.375 7.5 8.25 0.75"></polyline>
                                </svg>
                            </span>
                            <span>Button</span>
                        </label>
                    </div>

                    <div id="editor-element-trigger-direction-label" class="label-container-wide"><label
                            for="editor-element-analog-stick-side">Fill</label>
                    </div>
                    <div id="editor-element-trigger-direction-container" class="textbox-container-medium">
                        <div class="custom-select" style="width:100%">
                            <select id="editor-element-trigger-direction-side">
                                <option value="3">Left</option>
                                <option value="3">Left</option>
                                <option value="4">Right</option>
                                <option value="1">Up</option>
                                <option value="2">Down</option>
                            </select>
                        </div>
                    </div>

                    <!-- mouse movement type -->
                    <div id="editor-element-movement-type-label" class="label-container-wide"><label
                            for="editor-element-movement-type">Type</label>
                    </div>
                    <div id="editor-element-movement-type-container" class="textbox-container-medium">
                        <div class="custom-select" style="width:100%">
                            <select id="editor-element-movement-type">
                                <option value="1">Point</option>
                                <option value="1">Point</option>
                                <option value="0">Move</option>
                            </select>
                        </div>
                    </div>

                    <div id="editor-element-description-label" class="grid-full-width">
                        <p class="label-container-wide label" id="editor-info-label"></label>
                    </div>
                    <!-- Buttons -->
                    <div class="grid-full-width ">
                        <input type="button" onclick="apply_editor()" id="ok-editor" value="OK">
                        <input type="button" onclick="close_editor()" id="cancel-editor" value="Cancel">
                    </div>

                </div>
            </div>

            <div class="canvas-container" id="editor-canvas-container">
                <canvas id="editor-canvas"></canvas>
            </div>
        </div>
    </div>
</body>

</html>
